<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <div class="right">
      <div>
        <p style=" font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #E9E9E9;
        display: flex;
        justify-content: center;
        align-items: center;" id="robotitle">机器人操作面板</p>
      </div>
      <div class="right-bottom">
        <!-- 显示参数 -->
        <div class="Display-parameter">
          <div class="parameterTitle">
            <p>显示参数</p>
            <span></span>
          </div>
          <div class="parameterInp">
            <div class="parameterInp1">
              <div class="parameterInp1-1">
                <p>电机转速</p>
                <p style="color: #5DCBFF;">{{ djzs }}</p>
              </div>
            </div>
            <div class="parameterInp2">
              <div class="parameterInp2-1">
                <p>位移</p>
                <p style="color: #5DCBFF;">{{ sswy }}</p>
              </div>
            </div>
            <div class="parameterInp3">
              <div class="parameterInp3-1">
                <p>速度设定</p>
                <p style="color: #5DCBFF;">{{ jqrsd }}</p>
              </div>
            </div>
            <div class="parameterInp4">
              <div class="parameterInp4-1">
                <p>模式</p>
                <p style="color: #5DCBFF;">{{ jqrms }}</p>
              </div>
            </div>
            <div class="parameterInp5">
              <div class="parameterInp5-1">
                <p>方向</p>
                <p style="color: #5DCBFF;">{{ jqrfx }}</p>
              </div>
            </div>

            <div class="parameterInp6">
              <div class="parameterInp6-1">
                <p>摄像头</p>
                <p style="color: #5DCBFF;">{{ sxt }}</p>
              </div>
            </div>
            <div class="parameterInp7">
              <div class="parameterInp7-1">
                <p>照明灯</p>
                <p style="color: #5DCBFF;">{{ zmd }}</p>
              </div>
            </div>
            <div class="parameterInp8">
              <div class="parameterInp8-1">
                <p>电机</p>
                <p style="color: #5DCBFF;">{{ dj }}</p>
              </div>
            </div>

            <div class="parameterInp8">
              <div class="parameterInp8-1">
                <p>电量</p>
                <p style="color: #30a96a;" v-if="dcdl > 80">{{ dcdl }}%</p>
                <p style="color: #46cc51;" v-else-if="dcdl > 70">{{ dcdl }}%</p>
                <p style="color: #9eee25;" v-else-if="dcdl > 60">{{ dcdl }}%</p>
                <p style="color: #9eee25;" v-else-if="dcdl > 50">{{ dcdl }}%</p>
                <p style="color: #a5f1a6;" v-else-if="dcdl > 30">{{ dcdl }}%</p>
                <p style="color: #e19532;" v-else-if="dcdl > 20">{{ dcdl }}%</p>
                <p style="color: #5DCBFF;" v-else-if="dcdl=='无'">{{ dcdl }}</p>
                <p style="color: #de5c23;" v-else>{{ dcdl }}%</p>
              </div>
            </div>
            <div class="parameterInp8">
              <div class="parameterInp8-1">
                <p>电压</p>
                <p style="color: #138047;" v-if="dcdy > 70">{{ dcdy }}v</p>
                <p style="color: #0e8618;" v-else-if="dcdy > 50">{{ dcdy }}v</p>
                <p style="color: #29ab33;" v-else-if="dcdy > 40">{{ dcdy }}v</p>
                <p style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}v</p>
                <p style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}v</p>
                <p style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}v</p>
                <p style="color: #5DCBFF;" v-else-if="dcdy=='无'">{{ dcdy }}</p>
                <p style="color: #e19532;" v-else>{{ dcdy }}v</p>
              </div>
            </div>

          </div>
        </div>
        <!-- 公共操作 -->
        <div class="Common-operation">
          <div class="operation-title">
            <p>公共操作</p>
            <span></span>
          </div>
          <div class="operation-box">
<!--            <div class="operationBtn">
              <div class="operationBtn1">
                <p contenteditable="true" id="zcdid">20</p>
                <span>m</span>
                <el-button class="btn1" @click="zcdsz()">总长设置</el-button>
              </div>
            </div>-->
            <div class="operationBtn2">
              <div class="operationBtn2-1">
                <el-button class="btn1" @click="jqrzt()">机器人(暂停)</el-button>
              </div>
            </div>
            <div class="operationBtn22">
              <div class="operationBtn22-1">
                <el-button class="btn11" @click="sxtxj()">摄像头下降</el-button>
              </div>
            </div>
            <div class="operationBtn33">
              <div class="operationBtn33-1">
                <el-button class="btn22" @click="sxtss()">摄像头上升</el-button>
              </div>
            </div>
            <div class="operationBtn3">
              <div class="operationBtn3-1">
                <el-button class="btn2" @click="jqrdd()">机器人(断电)</el-button>
              </div>
            </div>
            <div class="mode">
              <div class="mode1">
                <p>模式<!-- <i class="el-icon-arrow-right"></i>--></p>
                <span></span>
              </div>
              <div class="mode2">
                <div class="mode2-1">
                  <p>手动</p>
                  <el-button size="mini" circle @click="jqrmsF('1')"></el-button>
                </div>
                <div class="mode2-1">
                  <p>自动</p>
                  <el-button size="mini" circle @click="jqrmsF('2')" style="
                            background: linear-gradient(227deg, #0F947C, #10DAB2);"></el-button>
                </div>
                <div class="mode2-1"  v-hasPermi="['nssc:zyms:view']">
                  <p>自由</p>
                  <el-button size="mini" circle @click="jqrmsF('0')" style="
                            background: linear-gradient(227deg, #0F947C, #10DAB2);"></el-button>
                </div>
                <div class="mode2-1">
                  <p>返航</p>
                  <el-button size="mini" circle @click="jqrzymsF('3')" style="
                            background: linear-gradient(227deg, #337F17, #3CA813);"></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 手动模式 -->
        <div class="Manual-mode">
          <div class="ManualTile">
            <p>手动模式</p>
            <span></span>
          </div>
          <div class="Manualcontenter">
            <div class="ManualBtn">
              <div class="ManualBtn1">
                <p contenteditable="true" id="mbwzid" style="
            width: 65px;
            height: 26px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            color: #cecdcd;
            text-align: center;
            align-items: center;
            justify-content: center;
            -webkit-box-align: center;
            ">1,0</p>
                <span>点位</span>
                <el-button class="btn1" @click="mbwzF()">目标位置</el-button>
              </div>
            </div>
            <div class="ManualBtn2">
              <div class="ManualBtn2-1">
                <el-button class="btn1" @click="sdmsqj()">前进</el-button>
                <el-button class="btn2" @click="sdmsht()">后退</el-button>
              </div>
            </div>
            <div class="ManualBox">
              <div class="ManualBox1">
                <el-dropdown @command="sdmslb">
                  <el-button type="primary" size="min" style="width: 65px;
                                      height: 25px;background: #0F1A43 !important;
                                      border: 2px solid #54619D;
                                      border-radius: 10px;
                                      font-size: 12px;
                                      font-family: Bahnschrift;
                                      font-weight: 400;
                                      color: #C1C1C1;
                                      display: flex;
                                      justify-content: center;
                                      align-items: center;
                                      ">
                    {{ sdmsd }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <p>m/min</p>
                <el-button plain @click="sdmsdF()">机器人速度</el-button>
              </div>
            </div>
            <div class="ManualBox2">
              <div class="ManualBox2-1">
                <el-button class="btn1" @click="sdmsqd()">手动启动</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 自由模式 -->
        <div class="Automatic-mode">
          <div class="AutomaticTitle">
            <p>自由模式</p>
            <span></span>
          </div>
          <div class="AutomaticBox">
            <div class="AutomaticBox1">
              <div class="AutomaticBox1-1">
                <div class="AutomaticBox1-1-1">
                  <el-dropdown @command="zymslb">
                    <el-button type="primary" size="min" style="width: 65px;
                          height: 25px;background: #0F1A43 !important;
                          border: 2px solid #54619D;
                          border-radius: 10px;
                          font-size: 12px;
                          font-family: Bahnschrift;
                          font-weight: 400;
                          color: #C1C1C1;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          ">
                      {{ zymsz }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="0">0</el-dropdown-item>
                      <el-dropdown-item command="1000">1000</el-dropdown-item>
                      <el-dropdown-item command="2000">2000</el-dropdown-item>
                      <el-dropdown-item command="3000">3000</el-dropdown-item>
                      <el-dropdown-item command="4000">4000</el-dropdown-item>
                      <el-dropdown-item command="5000">5000</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <p>m/min</p>
                  <el-button style="width: 90px;" class="btn1" @click="zymsdsd()">速度</el-button>
                </div>
              </div>
            </div>
            <div class="AutomaticBox2">
              <div class="AutomaticBox2-1">
                <div class="AutomaticBox2-1-1">
                  <el-button class="btn1" @click="zymsqj()">前进</el-button>
                  <el-button class="btn2" style="margin-left: 10%" @click="zymsht()">后退</el-button>
                  <el-button class="btn3" style="margin-left: 10%" @click="zymsqd()">自由启动</el-button>
                </div>
              </div>
            </div>
           <div class="AutomaticBox3"></div>
            <div class="AutomaticBox4">
            </div>
          </div>
        </div>
        <!-- 自由模式 -->
        <div class="Automatic-mode">
          <div class="AutomaticTitle">
            <p>反冲洗模式</p>
            <span></span>
          </div>
          <div class="AutomaticBox">
            <div class="AutomaticBox2">
              <div class="AutomaticBox2-1">
                <div class="AutomaticBox2-1-1">
                  <el-button class="btn3" style="margin-left: 10%" @click="zcsc()">正常生产</el-button>
                  <el-button class="btn3" style="margin-left: 10%" @click="fcx()">反冲洗</el-button>
                  <el-button class="btn3" style="margin-left: 10%" @click="qx()">气洗</el-button>
                </div>
              </div>
            </div>
            <div class="AutomaticBox3"></div>
            <div class="AutomaticBox4">
            </div>
          </div>
        </div>
        <!-- 一键返航 -->
        <div class="return">
          <div class="return-title">
            <p>一键返航</p>
            <span></span>
          </div>
          <div class="return-box">
            <div class="return-box1">
              <el-button plain class="Manual-btn" @click="yjfh()">一键返航</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边抽屉按钮 -->
    <el-button class="rightBtn" @click="dialog = true" round type="primary" size="mini"  icon="el-icon-d-arrow-left"
    style="color: #0b73c5;z-index:1000;position: fixed;right:-0.5%;top:50%;border:none;background:none !important;">
    </el-button>
     <!-- 右边抽屉 -->
     <div class="rightDrawer">
      <el-drawer :modal="false" :direction="directions" :visible.sync="dialog" :with-header="false" size="20%">
        <div class="put">
          <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)" prefix-icon="el-icon-search"
            clearable></el-input>
        </div>
        <div class="table">
          <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
            :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
            :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
            :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
            :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
            <el-table-column prop="robot_num" label="编号"  />
            <el-table-column prop="robot_name" label="名称"  />
            <el-table-column prop="robot_state" label="状态" width="70px">
              <template slot-scope="scope">
                <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                  style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                  style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import {
  gdzcdCmd,
  htCmd,
  jqrdataCmd,
  jqrddCmd,
  jqrsdCmd,
  mbwzCmd,
  msszCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  yjfhCmd,
  zdqdCmd,
  zymsmsszCmd,
  listonPageRobotConfig, zymshtCmd, zymsqjCmd, zymsrobotrunCmd, jqrsdzymsCmd, sxtxjCmd,sxtssCmd,zcsc,qx,fcx
} from "@/api/nssc/arobotcontrol/arobotcontrol"
import $ from "jquery";
export default {
  data() {
    return {
      //右侧抽屉
      dialog: false,
      directions: 'rtl',
      robot_name: undefined,//机器人名称
      djzs: '无', //电机转速
      sdmsd: '1000', //手动模式机器人速度
      zymsz: '1000', //自由模式机器人速度
      jqrfx: '无', //机器人方向
      sswy: '无', //实时位移
      jqrsd: '无',//机器人速度设定
      jqrms: '无',//机器人模式
      sxt: '无',//1#摄像头状态
      zmd: '无',//照明灯1状态
      dj: '无',//电机状态
      yxd: '无',//运行灯
      dcdy:'无',//电池电压
      dcdl:'无',//电池电量
      timer: null,//定时器
      //控制机器人的滚动条
      isDologin: false,
      robotList: [],//机器人列表
      queryParams: {
        robot_name: undefined //机器人名称
      },queryParams1: {
        robot_config_id: localStorage.getItem("robot_config_id"),
      },queryparms: {
        robotid: undefined,
        valu: undefined,
      },queryparms2: {
        robotid: undefined,
      }
    }
  },
  created() {
    //初始化页面加载方法
    this.getList();//机器人列表
  },
  mounted() {//加载完页面加载方法
    //机器人标题
    $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人面板"
        : localStorage.getItem("robot_name") + "面板");
    //定时器轮询程序
    this.timer = setInterval(() => {
      this.getList(); //机器人列表
      this.robotdata()//当前机器人数据
      console.log("操控面板定时")
    }, 2000);//2秒
  },
  beforeDestroy() {//清除定时器
    if (this.timer) {
      clearInterval(this.timer);//关闭
    }
  },
  methods: {
    //选中当前机器人
    handleSelectionChange(row) {
      localStorage.removeItem("video_ip1");//删除1视频ip
      localStorage.removeItem("video_port1");//删除1视频端口号
      localStorage.removeItem("video_name1");//删除1视频账号
      localStorage.removeItem("video_pwd1");//删除1视频密码
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_state");//删除机器人状态
      localStorage.setItem("video_ip1", row.video_ip1);//存储值
      localStorage.setItem("video_port1", row.video_port1);//存储值
      localStorage.setItem("video_name1", row.video_name1);//存储值
      localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
      localStorage.setItem("robot_name", row.robot_name);//存储值
      localStorage.setItem("robot_config_id", row.id);//存储值
      localStorage.setItem("robot_state", row.robot_state);//存储值
      this.queryParams1.robot_config_id = localStorage.getItem("robot_config_id");
      $("#robotitle").text(localStorage.getItem("robot_name") + "面板");//机器人名称标题
    },// 当前机器人数据
    robotdata() {
      this.queryparms2.robotid = localStorage.getItem("robot_config_id");
      jqrdataCmd(this.queryparms2).then(response => {
        if (typeof (response.data) != "undefined" && response.data != null) {
          this.djzs = response.data.djzs; //电机转速
          this.jqrfx = response.data.jqrfx; //机器人方向
          this.jqrsd = response.data.jqrsd;//机器人速度设定
          this.jqrms = response.data.jqrms; //机器人模式
          this.sxt =response.data.sxt;//摄像头状态
          this.zmd =  response.data.zmd;//照明灯状态
          this.dj = response.data.dj;//电机状态
          this.yxd = response.data.yxd;//运行灯
          this.sswy = response.data.sswy;//实时位移
          this.dcdl = response.data.dcdl;//电池电量
          this.dcdy = response.data.dcdy;//电池电压
        } else {
          this.djzs = "无"; //电机转速
          this.jqrfx = "无"; //机器人方向
          this.jqrsd = "无";//机器人速度设定
          this.jqrms = "无"; //机器人模式
          this.sxt = "无";//摄像头状态
          this.zmd = "无";//照明灯状态
          this.dj = "无";//电机状态
          this.yxd = "无" ;//运行灯
          this.sswy = "无";//实时位移
          this.dcdl = "无"; //电池电量
          this.dcdy = "无"; //电池电压
        }
      });
    },//一键返航
    yjfh() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      yjfhCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式前进
    sdmsqj() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      qjCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式后退
    sdmsht() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      htCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式目标位置
    mbwzF() {
      this.queryparms.valu = $("#mbwzid").text();
      console.log("目标位置" + this.queryparms.valu);
      if (this.queryparms.valu != "") {
        this.queryparms.robotid = localStorage.getItem("robot_config_id");
        mbwzCmd(this.queryparms).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("目标位置不能为空")
      }
    },//手动模式速度列表
    sdmslb(sdmsd) {
      this.sdmsd = sdmsd; //手动模式速度列表
    },//手动模式速度设置
    sdmsdF() {
      this.queryparms.valu = this.sdmsd;
      console.log("手动模式速度设置" + this.sdmsd);
      if (this.queryparms.valu != "") {
        this.queryparms.robotid = localStorage.getItem("robot_config_id");
        jqrsdCmd(this.queryparms).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("手动模式速度设置不能为空")
      }
    },//手动模式(启动)
    sdmsqd() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      robotrunCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自动模式(启动)
    zdmsqd() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      zdqdCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式速度列表
    zymslb(zymsz) {
      this.zymsz = zymsz; //自由模式速度列表
    },//自由模式速度设置
    zymsdsd() {
      this.queryparms.valu = this.zymsz;
      console.log("自由模式速度设置" + this.zymsz);
      if (this.queryparms.valu != "") {
        this.queryparms.robotid = localStorage.getItem("robot_config_id");
        jqrsdzymsCmd(this.queryparms).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自由模式速度设置不能为空")
      }
    },//自由模式前进
    zymsqj() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      zymsqjCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式后退
    zymsht() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      zymshtCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式(启动)
    zymsqd() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      zymsrobotrunCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//轨道总长度设定设置
    zcsc() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      zcsc(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//轨道总长度设定设置
    fcx() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      fcx(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//轨道总长度设定设置
    qx() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      qx(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//轨道总长度设定设置
    zcdsz() {
      this.queryparms.valu = $("#zcdid").text();
      console.log("轨道总长度设定设置" + this.queryparms.valu);
      if (this.queryparms.valu != "") {
        this.queryparms.robotid = localStorage.getItem("robot_config_id");
        gdzcdCmd(this.queryparms).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("轨道总长度设定设置不能为空")
      }
    },//机器人(暂停)
    jqrzt() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      robotstopCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//摄像头下降
    sxtxj(){
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      sxtxjCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//摄像头上升
    sxtss(){
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      sxtssCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//机器人断电
    jqrdd() {
      this.queryparms.robotid = localStorage.getItem("robot_config_id");
      jqrddCmd(this.queryparms).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//机器人模式设置
    jqrmsF(jqrms) {
      this.queryparms.valu = jqrms
      console.log("机器人模式设置" + this.queryparms.valu);
      if (this.queryparms.valu != "") {
        this.queryparms.robotid = localStorage.getItem("robot_config_id");
        msszCmd(this.queryparms).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//机器人自由模式设置
    jqrzymsF(jqrms) {
      this.queryparms.valu = jqrms
      console.log("机器人模式设置" + this.queryparms.valu);
      if (this.queryparms.valu != "") {
        this.queryparms.robotid = localStorage.getItem("robot_config_id");
        zymsmsszCmd(this.queryparms).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//根据输入框机器人名称，查询机器人列表
    getRobotName(robot_name) {
      this.queryParams.robot_name = robot_name;
      this.getList();
    },//查询机器人列表
    getList() {
      this.loading = true;
      listonPageRobotConfig(this.queryParams).then(response => {
        this.robotList = response.rows;
        this.loading = false;
      });
    },enter() {
      this.isDologin = true;
    },leave() {
      this.isDologin = false;
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.el-button+.el-button {
  margin-left: 0px;
}

.app-container {
  width: 100%;
  height: calc(100vh - 35px);
  display: flex;
  //justify-content: center;
  //align-items: center;
  background-color: #011137 !important;

}


.right {
  width: 98%;
  height: 98%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right-robot {
  width: 98%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #011137 !important;
  border: 1px solid #383D5C;
  border-radius: 4px;
  border-top: none;


  p {
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #E9E9E9;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.right-bottom {
  margin-top: 0.5%;
  width: 98%;
  height: 100%;
  border: 1px solid #27306b;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  //align-items: center;
  //justify-content: center;
  background-color: #011137 !important;
}


//显示参数
.Display-parameter {
  width: 100%;
  height: 25%;
  //background-color: aquamarine;
  border-bottom: 1px solid #27306b;
  display: flex;
  flex-direction: column;
  align-items: center;

  .parameterTitle {
    width: 98%;
    height: 15%;
    margin-left: 4px;
    margin-top: 5px;

    //background-color: bisque;
    p:nth-child(1) {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
    }

    :nth-child(2) {
      display: block;
      width: 36px;
      height: 2px;
      margin-left: 10px;
      background-color: #4691FF;
    }
  }

  .parameterInp {
    width: 98%;
    height: 85%;
    //background-color: #108B8F;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .parameterInp1 {
      width: 22%;
      height: 100%;
      //background-color: rgb(9, 198, 22);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .parameterInp1-1 {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 3px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .parameterInp1-2 {
        width: 90%;
        height: 50%;
        // background-color: #ed900d;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        p:nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .parameterInp2 {
      width: 18%;
      height: 100%;
      //background-color: rgb(58, 96, 51);
      display: flex;
      flex-direction: column;
      //justify-content:start;
      align-items: center;

      .parameterInp2-1 {
        width: 95%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 2px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .parameterInp2-2 {
        width: 95%;
        height: 50%;
        display: flex;
        align-items: center;
        //justify-content: start;
        //background-color: #ec8f0d;

        p:nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 26px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .parameterInp3 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      //align-items: center;
      justify-content: center;

      .parameterInp3-1 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        // background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

    }

    .parameterInp4 {
      width: 18%;
      height: 100%;
      //background-color: rgb(61, 96, 51);
      display: flex;
      justify-content: center;

      .parameterInp4-1 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .parameterInp5 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      justify-content: center;

      .parameterInp5-1 {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }


    .parameterInp6 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      justify-content: center;

      .parameterInp6-1 {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }



    .parameterInp7 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      justify-content: center;

      .parameterInp7-1 {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }


    .parameterInp8 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      justify-content: center;

      .parameterInp8-1 {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .parameterInp9 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      justify-content: center;

      .parameterInp9-1 {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }




    .parameterInp10 {
      width: 20%;
      height: 100%;
      //background-color: rgb(51, 96, 96);
      display: flex;
      justify-content: center;

      .parameterInp10-1 {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        //background-color: #9B6D2B;

        p:nth-child(1) {
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-right: 4px;
        }

        p:nth-child(2) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

//公共操作
.Common-operation {
  width: 100%;
  height: 15%;
  border-bottom: 1px solid #27306b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .operation-title {
    width: 98%;
    height: 25%;
    margin-left: 4px;
    margin-top: 5px;

    //background-color: bisque;
    p:nth-child(1) {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
    }

    :nth-child(2) {
      display: block;
      width: 36px;
      height: 2px;
      margin-left: 10px;
      background-color: #4691FF;
    }
  }

  .operation-box {
    width: 98%;
    height: 75%;
    display: flex;
    justify-content: space-around;
    //background-color: #108B8F;

    .operationBtn {
      width: 22%;
      height: 100%;
      // margin-bottom: 10px;
      // background-color: #84bf0f;
      display: flex;
      //justify-content: center;
      align-items: center;

      .operationBtn1 {
        width: 90%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //background-color: #4691FF;

        p:nth-child(1) {
          width: 65px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        :nth-child(2) {
          margin-left: 8px;
          margin-right: 8px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn1 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .operationBtn2 {
      width: 14%;
      height: 100%;
      //background-color: #459b2b;
      display: flex;
      justify-content: center;
      align-items: center;

      .operationBtn2-1 {
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //background-color: #86e841;

        .btn1 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #673B1B);
          border: 2px solid #9B6D2B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

    }

    .operationBtn22 {
      width: 14%;
      height: 100%;
      //background-color: #459b2b;
      display: flex;
      justify-content: center;
      align-items: center;

      .operationBtn22-1 {
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //background-color: #86e841;

        .btn11 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #0d2771);
          border: 2px solid #2b489b;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

    }
    .operationBtn3 {
      width: 14%;
      height: 100%;
      //background-color: #9B6D2B;
      display: flex;
      justify-content: center;
      align-items: center;

      .operationBtn3-1 {
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        //background-color: #0fbf9d;

        .btn2 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: -30px;
        }
      }
    }
    .operationBtn33 {
      width: 14%;
      height: 100%;
      //background-color: #9B6D2B;
      display: flex;
      justify-content: center;
      align-items: center;

      .operationBtn33-1 {
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        //background-color: #0fbf9d;

        .btn22 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #0a3254, #111954);
          border: 2px solid #2a64ad;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: -30px;
        }
      }
    }
    .mode {
      width: 36%;
      height: 100%;
      display: flex;
      align-items: center;
      // background-color: darksalmon;
      margin-bottom: 10px;

      .mode1 {
        width: 10%;
        height: 100%;
        //background-color: #083d50;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        >p {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
        }

        >span {
          display: block;
          width: 18px;
          height: 2px;
          margin-left: 5px;
          background-color: #4691FF;
        }
      }

      .mode2 {
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        //background-color: #ea6767;
        .mode2-1 {
          width: 33%;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;

          //background-color: #5f5c5c;
          :nth-child(2) {
            width: 25px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            border-width: 0px;
          }

          :nth-child(1) {
            width: 50px;
            height: 16px;
            text-align: center;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
          }
        }
      }
    }


  }

}

//手动模式
.Manual-mode {
  width: 100%;
  height: 20%;
  border-bottom: 1px solid #27306b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  //background-color: rgb(222, 134, 18);
  .ManualTile {
    width: 98%;
    height: 18%;
    margin-left: 4px;
    margin-top: 5px;

    //background-color: bisque;
    p:nth-child(1) {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
    }

    :nth-child(2) {
      display: block;
      width: 36px;
      height: 2px;
      margin-left: 10px;
      background-color: #4691FF;
    }
  }

  .Manualcontenter {
    width: 98%;
    height: 82%;
    display: flex;
    justify-content: space-around;
    //background-color: #108B8F;

    .ManualBtn {
      width: 22%;
      height: 100%;
      //background-color: #3ff445;
      display: flex;
      //justify-content: center;
      align-items: center;

      .ManualBtn1 {
        width: 90%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //background-color: #9B6D2B;
        display: flex;

        ::v-deep .el-input--medium .el-input__inner {
          height:25px;
          line-height: 25px;
          font-size: 12px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
        }

        ::v-deep .el-select:hover .el-input__inner {
          border-color: #54619D !important;
        }

        ::v-deep .el-input--suffix .el-input__inner {
          padding-right: 18px !important;
        }

        ::v-deep .el-select .el-input .el-select__caret{
          font-size: 12px !important;
        }

        ::v-deep .el-input__icon{
          width: 12px !important;
        }

        ::v-deep .el-select .el-input .el-select__caret{
          line-height: 20px !important;
        }

        ::v-deep .el-input__inner{
          padding: 0px 5px !important;
        }


        p:nth-child(1) {
          width: 65px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        :nth-child(2) {
          //margin-left: 4px;
          margin-right: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn1 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .ManualBtn2 {
      width: 18%;
      height: 100%;
      //background-color: aquamarine;
      display: flex;
      justify-content: center;
      align-items: center;

      .ManualBtn2-1 {
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //background-color: #86e841;

        .btn1 {
          width: 90px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
        }

        .btn2 {
          width: 90px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          margin-left: 28px;
        }
      }

    }

    .ManualBox {
      width: 22%;
      height: 100%;
      //background-color: #9B6D2B;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .ManualBox1 {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        //background-color: #0fbf9d;



        :nth-child(2) {
          // margin-left: -5%;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        :nth-child(3) {
          width: 65px;
          height: 25px;
          border: 1px solid #595E7B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          margin-left: 1%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .ManualBox2 {
      width: 36%;
      height: 100%;
      // background-color: #509b2b;
      display: flex;
      align-items: center;
      justify-content: center;

      .ManualBox2-1 {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content:flex-start;
        align-items: center;
        //background-color: #9B6D2B;

        .btn1 {
          width: 90px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

//自动模式
.Automatic-mode {
  width: 100%;
  height: 30%;
  border-bottom: 1px solid #27306b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  //background-color: rgb(17, 115, 82);
  .AutomaticTitle {
    width: 98%;
    height: 15%;
    margin-left: 4px;
    margin-top: 5px;

    //background-color: bisque;
    p:nth-child(1) {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
    }

    :nth-child(2) {
      display: block;
      width: 36px;
      height: 2px;
      margin-left: 10px;
      background-color: #4691FF;
    }
  }

  .AutomaticBox {
    width: 98%;
    height: 85%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    //background-color: #108B8F;

    .AutomaticBox1 {
      width: 26%;
      height: 100%;
      display: flex;
      //justify-content:start;
      //align-items: flex-start;
      //background-color: rgb(126, 239, 65);

      .AutomaticBox1-1 {
        width: 100%;
        height: 100%;
        //background-color: #459b2b;

        .AutomaticBox1-1-1 {
          display: flex;
          align-items: center;
          //justify-content: center;
          height: 50%;
          //padding-left: 8px;
          //background-color: #0fbf9d;

          :nth-child(2) {
            //margin-left: 4px;
            //margin-right: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }

          .btn1 {
            width: 65px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            // margin-bottom: 15%;
          }

        }

        .AutomaticBox1-1-2 {
          display: flex;
          align-items: center;
          //justify-content: center;
          height: 50%;
          //padding-left: 8px;
          // background-color: #0f2fbf;

          p:nth-child(1) {
            width: 65px;
            height: 25px;
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          :nth-child(2) {
            margin-left: 4px;
            margin-right: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }

          .btn2 {
            width: 90px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

    }

    .AutomaticBox2 {
      width: 60%;
      height: 100%;
      //margin-left: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      //background-color: rgb(166, 236, 213);

      .AutomaticBox2-1 {
        width: 95%;
        height: 100%;
        //background-color: #ec8f0d;

        .AutomaticBox2-1-1 {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 50%;
          //background-color: #54619D;

          p:nth-child(1) {
            width: 60px;
            height: 25px;
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          :nth-child(2) {
            margin-left: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }

          .btn1 {
            width: 90px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #065D70);
            border: 2px solid #108B8F;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            //margin-bottom: 15%;
          }
          .btn2 {
            width: 90px;
            height: 25px;
            background: linear-gradient(0deg, #4C0820, #0D1538);
            border: 2px solid #942028;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            //margin-bottom: 15%;
          }
          .btn3 {
            width: 90px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            //margin-bottom: 15%;
          }
        }

        .AutomaticBox2-1-2 {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 50%;
          //   background-color: #d14bb6;

          .p1 {
            width: 50px;
            height: 25px;
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .span1 {
            margin-left: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }

          .p2 {
            width: 50px;
            height: 25px;
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .span2 {
            margin-left: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }
        }
      }

    }

    .AutomaticBox3 {
      width: 22%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      //background-color: rgb(5, 80, 55);

      .AutomaticBox3-1 {
        width: 100%;
        height: 100%;
        //background-color: #d14bb6;

        .AutomaticBox3-1-1 {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50%;
          //background-color: #4691FF;

          .btn1 {
            width: 90px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #673B1B);
            border: 2px solid #9B6D2B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: -46px;
          }


        }

        .AutomaticBox3-1-2 {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          height: 50%;
          //background-color: #56ff46;

          .btn2 {
            width: 70px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            //margin-right: 40px;
          }

          .btn4 {
            width: 70px;
            height: 25px;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 18px;
          }
        }
      }

    }

    .AutomaticBox4 {
      width: 36%;
      height: 100%;
      //background-color: aquamarine;

      .AutomaticBox4-1 {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        //background-color: rgb(233, 53, 194);

        .btn1 {
          width: 50px;
          height: 25px;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
        }

        .btn3 {
          width: 50px;
          height: 25px;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

  }
}

//一键返航
.return {
  width: 100%;
  height: 10%;

  //background-color: #d4f283;
  .return-title {
    width: 98%;
    height: 25%;
    margin-top: 5px;

    //background-color: #0264bf;
    >p {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
      margin-left: 20px;
    }

    span {
      display: block;
      margin-left: 3px;
      width: 40px;
      height: 2px;
      background: #4691FF;
      border-radius: 2px;
      //margin-bottom: 0.5%;
      margin-left: 2.5%;
    }
  }

  .return-box {
    width: 98%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;

    //background-color: #0D817A;

    .return-box1 {
      width: 13.5%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      //background-color: #E9E9E9;

      .Manual-btn {
        width: 90px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #EDEDED;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        //margin-left: -46px;
        //margin-bottom: 5px;
      }
    }

  }
}

//抽屉按钮
.rightBtn{
  font-size: 26px;
  z-index: 1000;

  ::v-deep .el-button--mini.is-round{
    font-size: 35px !important;
  }
}
  //右边抽屉
  .rightDrawer{
    display: flex;
    justify-content: center;
    align-items: center;
   ::v-deep .el-drawer__body{
      display: flex;
      flex-direction: column;
      //justify-content: center;
      align-items: center;
      background:#0E2356;

     .put {
      width: 94%;
      margin: 10px;

      ::v-deep .el-input {
        width: 96%;
        height: 20px;
      }

      ::v-deep .el-input__inner {
        border: 2px solid #0264bf;
        background-color: #081a46;
        // margin: 10px;
      }
    }

    .table {
      width: 94%;
      height: 200px;
      margin: 10px;
      // margin-top: 20px;
      overflow: auto;

      ::v-deep .el-table__body-wrapper {
        &::-webkit-scrollbar {
          // 整个滚动条
          width: 0px; // 纵向滚动条的宽度
          background: rgba(71, 103, 182, 0.3);
          border: none;
        }

        &::-webkit-scrollbar-track {
          // 滚动条轨道
          border: none;
        }
      }

      .el-table {
        width: 100%;

      }

      ::v-deep .el-table th.gutter {
        display: none;
        width: 0
      }

      ::v-deep .el-table colgroup col[name='gutter'] {
        display: none;
        width: 0;
      }

      // ::deep .el-table::before {
      //     height: 0px;
      // }

      ::v-deep .el-table__body {
        width: 100%;
        // padding-left: 10px;
      }

      ::v-deep .el-table__body-wrapper {
        width: 100%;
        background-color: #081a46;
      }

      /*滚动条的宽度*/
      .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
      }

      .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: block;
        width: 0;
      }

      ::v-deep .el-table tr {
        background-color: transparent;
        border: none;
        // height: 50px;
        width: 100%;
        background-color: #081a46;
      }

      ::v-deep .el-table td {
        background-color: trannt;
        border: none;
        width: 100%;
        // height: 50px;
        background-color: #081a46;
      }

      // /* 表格内背景颜色 */
      ::v-deep .el-table th {
        background-color: transparent;
        border: none;
        width: 100%;
      }

      // 移入变色
      ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #222448;
      }
    }

    ::v-deep.el-progress-bar__inner {
      background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
    }

    .table::-webkit-scrollbar {
      display: none;
      /*隐藏滚动条*/
    }
    }

  }
</style>
